<template>
  <div class="layout">
    <!-- 顶部卡片 -->
    <el-row :gutter="24" style="margin-top: 24px; display: flex;">
      <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8" style="display: flex;">
        <el-card shadow="hover" style="flex: 1; border-radius: 12px;">
          <template #header>
            <div class="card-header">
              <span style="color: #1ab394; font-size: 24px; font-weight: bold;">农村流动人口管理系统</span><br>
              <span style="color: #E617E6; font-size: 18px;">RURAL FLOW</span>
            </div>
          </template>
          <ul style="height: 290px;">
            <li class="text item" @click="handleRentalView">出租屋信息概览</li>
          </ul>
          <template #footer>
            <span style="color: #544f55; font-size: 16px;">欢迎！尊敬的 {{ name }} ！</span>
          </template>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16" style="display: flex;">
        <el-card shadow="hover" style="flex: 1; border-radius: 12px;">
          <el-carousel height="450px" indicator-position="outside">
            <el-carousel-item v-for="(image, index) in images" :key="index">
              <img :src="image" alt="图片" style="width: 100%; height: 100%; object-fit: cover; border-radius: 8px;">
            </el-carousel-item>
          </el-carousel>
        </el-card>
      </el-col>
    </el-row>


    <!-- 数据统计卡片 -->
    <el-row :gutter="24" class="dashboard-console-grid" style="margin-top: 24px;" v-if="auth.hasRoleOr(['admin'])">
      <el-col :xs="12" :sm="12" :lg="6" class="ivu-mb">
        <el-card shadow="hover" :bordered="false" @click="handleClickOpenHukou" class="dashboard-card">
          <template #header>
            <div class="card-title">
              <el-icon :size="24" style="color: #1ab394;">
                <DataAnalysis />
              </el-icon>
              <span>登记户口总数</span>
            </div>
          </template>
          <div class="card-content">
            <el-statistic :value="summaryData.hukouCount" :precision="0">
              <template #suffix>
                <span style="font-size: 14px;">户</span>
              </template>
            </el-statistic>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="ivu-mb">
        <el-card shadow="hover" :bordered="false" @click="handleClickOpenPopulation" class="dashboard-card">
          <template #header>
            <div class="card-title">
              <el-icon :size="24" style="color: #E617E6;">
                <DataAnalysis />
              </el-icon>
              <span>流动人口总数</span>
            </div>
          </template>
          <div class="card-content">
            <el-statistic :value="summaryData.populationCount" :precision="0">
              <template #suffix>
                <span style="font-size: 14px;">人</span>
              </template>
            </el-statistic>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="ivu-mb">
        <el-card shadow="hover" :bordered="false" @click="handleClickOpenFlowApply" class="dashboard-card">
          <template #header>
            <div class="card-title">
              <el-icon :size="24" style="color: #FFC107;">
                <DataAnalysis />
              </el-icon>
              <span>流动申请数量</span>
            </div>
          </template>
          <div class="card-content">
            <el-statistic :value="summaryData.applyCount" :precision="0">
              <template #suffix>
                <span style="font-size: 14px;">件</span>
              </template>
            </el-statistic>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="ivu-mb">
        <el-card shadow="hover" :bordered="false" @click="handleClickOpenFlowPass" class="dashboard-card">
          <template #header>
            <div class="card-title">
              <el-icon :size="24" style="color: #03A9F4;">
                <DataAnalysis />
              </el-icon>
              <span>通行证数量</span>
            </div>
          </template>
          <div class="card-content">
            <el-statistic :value="summaryData.passCount" :precision="0">
              <template #suffix>
                <span style="font-size: 14px;">张</span>
              </template>
            </el-statistic>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 更多卡片 -->
    <el-row :gutter="24" style="margin-top: 24px;" v-if="auth.hasRoleOr(['admin'])">
      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
        <el-card shadow="hover" style="border-radius: 12px;">
          <template #header>
            <div class="card-title">
              <el-icon :size="24" style="color: #9C27B0;">
                <MessageBox />
              </el-icon>
              <span>最新通知</span>
            </div>
          </template>
          <div class="card-content">
            <p>1. 系统将于本周五进行维护。</p>
            <p>2. 新增流动人口登记功能。</p>
            <p>3. 优化系统性能，提升用户体验。</p>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
        <el-card shadow="hover" style="border-radius: 12px;">
          <template #header>
            <div class="card-title">
              <el-icon :size="24" style="color: #FF5722;">
                <EditPen />
              </el-icon>
              <span>待办事项</span>
            </div>
          </template>
          <div class="card-content">
            <p>1. 审核流动人口申请。</p>
            <p>2. 更新系统工具。</p>
            <p>3. 检查系统监控数据。</p>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
        <el-card shadow="hover" style="border-radius: 12px;">
          <template #header>
            <div class="card-title">
              <el-icon :size="24" style="color: #248fc8;">
                <EditPen />
              </el-icon>
              <span>大事纪要</span>
            </div>
          </template>
          <div class="card-content">
            <p>1. 上周开展关怀服务。</p>
            <p>2. 本周将要开展志愿者组织活动。</p>
            <p>3. 帮助大学生解决就业问题。</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 弹窗 -->
    <el-dialog
        title="出租屋信息概览"
        v-model="dialogRental"
        width="80%"
    >

      <div class="app-container">
        <!-- 查询表单 -->
        <el-form :model="queryRentalParams" ref="queryRentalRef" :inline="true">
          <el-form-item label="出租屋类型" prop="rentalType">
            <el-select v-model="queryRentalParams.rentalType" style="width: 240px" placeholder="请选择出租屋类型" clearable>
              <el-option
                  v-for="dict in rental_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleRentalQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetRentalQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-row>
          <!-- 表格数据展示 -->
          <el-table :data="rentalList.filter(item => item.rentalStatus === '0')"
                    highlight-current-row>
            <el-table-column label="序号" align="center" width="50" type="index" />
            <el-table-column label="出租屋编号" width="250" align="center" prop="rentalCode" />
            <el-table-column label="出租屋图片" align="center" width="200" prop="rentalImages" >
              <template #default="scope">
                <image-preview :src="scope.row.rentalImages" :width="50" :height="50"/>
              </template>
            </el-table-column>
            <el-table-column label="出租屋标题" align="center" width="250" prop="rentalTitle" />
            <el-table-column label="出租屋类型" align="center" width="250" prop="rentalType">
              <template #default="scope">
                <dict-tag :options="rental_type" :value="scope.row.rentalType"/>
              </template>
            </el-table-column>
            <el-table-column label="出租价格" align="center" prop="rentalPrice" />
            <el-table-column label="出租面积" align="center" prop="rentalArea" />
            <el-table-column label="出租屋地址" align="center" width="200px" prop="rentalLocation" />
            <el-table-column label="出租状态" align="center" prop="rentalStatus">
              <template #default="scope">
                <dict-tag :options="rental_status" :value="scope.row.rentalStatus"/>
              </template>
            </el-table-column>
            <el-table-column label="联系人姓名" align="center" width="200" prop="contactName" />
            <el-table-column label="联系人电话" align="center" width="200" prop="contactPhone" />
          </el-table>
        </el-row>

      </div>

    </el-dialog>
  </div>
</template>

<script setup name="Index">
import {DataAnalysis, EditPen, MessageBox, Money} from "@element-plus/icons-vue";
import {getModuleSummaryData} from "@/api/statistics.js";
import useUserStore from "@/store/modules/user.js";
import { ref } from 'vue';
import {listRental} from "@/api/rental/rental.js";
import auth from "@/plugins/auth.js";

const router = useRouter();
const { proxy } = getCurrentInstance();
const { rental_status, rental_type } = proxy.useDict('rental_status', 'rental_type', 'rental_facilities');
// 当前登录用户的账号
const name = useUserStore().name;
const dialogRental = ref(false);
const rentalList = ref([]);
const data = reactive({
  // 查询表单
  queryRentalParams: {
    pageNum: 1,
    pageSize: 10,
    rentalType: null,
  },
  rules: {
  }
});
const { queryRentalParams } = toRefs(data);
const images = [
  'http://60.205.236.234:9000/powercrm/2025/02/22/a6dd7.jpg',
  'http://60.205.236.234:9000/powercrm/2025/02/22/be5ff.jpg',
];

// ----自定义数据（概览相关）----
const summaryData = ref({
  hukouCount: 0,
  populationCount: 0,
  applyCount: 0,
  passCount: 0
})

onMounted(() => {
  getSummaryData();
})

// ----概览数据相关----
// 获取概览数据
function getSummaryData() {
  getModuleSummaryData().then(response => {
    summaryData.value = response.data
  })
}

function handleClickOpenHukou() {
  router.push("/population/hukou")
}

function handleClickOpenPopulation() {
  router.push("/population/population")
}

function handleClickOpenFlowApply() {
  router.push("/flow/flowApply")
}

function handleClickOpenFlowPass() {
  router.push("/flow/flowPass")
}

function handleRentalView() {
  // 打开弹窗
  dialogRental.value = true;
}

function handleRentalQuery() {
  queryRentalParams.value.pageNum = 1;
  getRentalList();
}

/** 重置按钮操作 */
function resetRentalQuery() {
  proxy.resetForm("queryRentalRef");
  handleRentalQuery();
}

/** 查询出租屋信息列表 */
function getRentalList() {
  listRental(queryRentalParams.value).then(response => {
    rentalList.value = response.rows;
  });
}
getRentalList()

</script>

<style scoped lang="scss">
.layout {
  margin: 20px; /*上下左右边距一致*/
  font-size: 20px;
  font-weight: bold;
  .dashboard-console-grid {
    margin-top: 20px;
    .ivu-mb {
      .dashboard-card {
        height: 130px;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;/* 鼠标悬停时显示小手图标 */
        .card-title{
          display: flex;
          justify-content: space-between; /* 水平方向上两端对齐 */
          align-items: center; /* 垂直方向上居中对齐 */
        }
        .card-content {
          display: flex;
          align-items: flex-start;
          justify-content: flex-start;
        }
      }
    }
  }
}

/* 列表项样式 */
.text.item {
  cursor: pointer; /* 显示小手图标 */
  padding: 8px 0; /* 增加一些内边距 */
  list-style-type: none; /* 去掉默认的列表符号 */
}

.text.item:hover {
  background-color: #f5f5f5; /* 鼠标悬停时背景色变化 */
}

/* 卡片标题样式 */
.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: bold;
}

/* 卡片内容样式 */
.card-content {
  margin-top: 12px;
  font-size: 16px;
}
</style>
